<template>
  <view class="list1">
    <view class="item">
      <view class="img"><image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250425/8a7d0436812d8db5d234949bfe5b0008.png" mode=""></image></view>
      <view class="text-area">
        <view class="title">商品名称商品名称商品名 标题标题标题标题标题</view>
        <view class="price-box">
          <view class="price">
            <view class="unit">￥</view>
            <view class="num">100</view>
          </view>
          
        </view>
        <view class="tags">
          <view>佣金￥2.2</view>
          <view>占比15%</view>
        </view>
        <view class="action">
          <view class="btn del">
            <image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250523/500c5efb1a531184746be1ea168b77d8.png"></image>
            <view>删除</view>
          </view>
          <view class="btn share">
            <image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250522/a2384fa073c9fbb5183d56eb3452d91e.png"></image>
            <view>分享</view>
          </view>
          <view class="sales">已售22</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import sheep from '@/sheep';
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  productData: {
    type: Object,
    default() {},
  },
});

console.log(props.productData, '-')


</script>

<style lang='scss' scoped>
@import '../style/basic.scss';

.list1 {
  .item {
    @include flex-center;
  }
  .img {
    width: 250rpx;
    height: 250rpx;
    border-radius: 12px 0px 0px 12px;
    image {
      width: 100%; 
      height: 100%;
      border-radius: 12px 0px 0px 12px;
    }
  }
  .text-area {
    padding-left: 24rpx;
    padding-right: 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-weight: bold;
      color: $primary-third-color;
      font-size: 26rpx;
    }
    .price-box {
      @include flex-center-between;
      .price {
        display: flex;
        align-items: baseline;
        view {
          color: $primary-main-color;
          font-weight: Bold;
        }
        .unit {
          font-size: 24rpx;
        }
        .num {
          font-size: 32rpx;
          
        }
      }
      .sales {
        color: $primary-second-color;
        font-size: 21rpx;
        font-family: $font-PF-Regular;
      }
    }
    .tags {
      @include flex-center;
      view {
        font-family: $font-PF-Bold;
        font-weight: bold;
        font-size: 24rpx;
        color: $primary-main-color;
        padding: 7rpx 10rpx;
        border: 1rpx solid $primary-main-color;
        border-radius: 6rpx;
      }
      view:first-child {
        margin-right: 7rpx;
      }
    }
    .action {
      @include flex-center;
      margin-top: 19rpx;
      .btn {
        @include flex-center;
        view {
          color: $primary-second-color;
          font-family: $font-PF-Regular;
          font-size: 24rpx;
          margin-left: 4rpx;
        }
      }
      .btn:first-child {
        margin-right: 20rpx;
      }
      .del {
        image {
          width: 21rpx;
          height: 23rpx;
        }
      }
      .share {
        image {
          width: 21rpx;
          height: 21rpx;
        }
      }
      .sales {
        flex: 1;
        text-align: right;
        color: $primary-second-color;
        font-size: 21rpx;
        font-family: $font-PF-Regular;
      }
    }
  }

  
}
</style>